<template>
  <div class="Info">
    <mt-header title="基本资料">
      <mt-button icon="back" slot="left" @click="gobackIDcard ">返回</mt-button>
    </mt-header>

    <group>
      <div>
        <cell :title="$t('头像')" is-link value-align="left" class="head">
          <img :src="headUrl" class="Infohead" alt="" >
          <div class=" Infohead uploadHead" @click="onClickUp"></div>
        </cell>

        <actionsheet v-model="album" :menus="albums" show-cancel></actionsheet>
      </div>
      <cell :title="$t('昵称')" is-link link="/IDcard/Info/Nick" value-align="left">
        <p style="float:right" v-text="nickName"></p>
      </cell>
      <!-- <popup-picker :title="nick" @on-change="onChange" :placeholder="$t('未设置')"></popup-picker> -->
      <popup-picker :title="grade" :data="gradeList" v-model="value1_1" @on-change="gradeChange"
        :placeholder="$t('未设置')"></popup-picker>
      <!-- toast提示 -->
      <toast v-model="showPositionValue" type="success" :time="600" is-show-mask text="年级修改成功" :position="position" width="20rem">{{ $t('Basic Usage') }}</toast>
      <!-- <toast v-model="showWarn" type="warn" is-show-mask></toast> -->
      <cell :title="$t('性别')" is-link value-align="left" @click.native="sex">
        <p style="float:right">{{gender | genders}}</p>
      </cell>

    </group>

    <div v-transfer-dom>
      <x-dialog v-model="showToast" class="dialog-demo" hide-on-blur>
        <div class="sexTitle">性别</div>
        <div style="padding:15px;">
          <x-button @click.native="doShowToast(1)" type="primary">男</x-button>
          <x-button @click.native="doShowToast(2)" type="primary">女</x-button>
        </div>
        <div @click="showToast=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>

</template>

<script>
import {
    XSwitch,
    XButton,
    Panel,
    Cell,
    Group,
    Actionsheet,
    PopupPicker,
    XDialog,
    Toast,
    TransferDomDirective as TransferDom
} from "vux";

import {
    getOAuth_Axios,
    getUserInfo_Axios,
    putGrade_Axios,
    putGender_Axios
} from "./axios/api";

export default {
    directives: {
        TransferDom
    },
    filters: {
        genders: function(value) {
            switch (value) {
                case 1:
                    return "男";
                case 2:
                    return "女";
            }
        }
    },
    components: {
        Group,
        XSwitch,
        XButton,
        Cell,
        PopupPicker,
        Actionsheet,
        XDialog,
        Toast
    },

    data() {
        return {
            date: "",
            nick: "昵称",
            grade: "年级",
            gradeList: [["初一", "初二", "初三", "高一", "高二", "高三"]],
            gradevalue: false,
            album: false, //相册菜单显示
            imageUrl: "",
            value1_1: ["初一"],
            position: "middle",
            showPositionValue: false,
            showToast: false,
            albums: {
                menu1: this.$t("从手机相册中选取"),
                menu2: this.$t("拍照")
            },
            format: function(value, name) {
                return `${value[0]}:${value[1]}`;
            },
            nickName: "",
            gender: "",
            gradeNum: 100,
            headUrl: "",
            isRouterAlive: true,
            // userId: 26,
            userId: sessionStorage.getItem("id"),
            nickName: "",
            headimgurl: "",
            userSex: ""
        };
    },
    created() {
        let userId = this.userId;
        let wxUrl = window.location.href.split("#")[0];
        // console.log("wxUrl当前" + wxUrl);
        getOAuth_Axios(wxUrl).then(
            response => {
                console.log(response);
                let data = response.data.data;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: "wx2750055a558bbe86", // 必填，企业号的唯一标识，此处填写企业号corpid
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature, // 必填，签名，见附录1
                    jsApiList: [
                        "chooseImage",
                        "uploadImage",
                        "downloadImage",
                        "getLocalImgData"
                    ]
                    // 必填，需要使用的JS接口列表
                });
            },
            response => {
                console.log("请求失败了!!!!");
            }
        );
        this.getStudentInfo();
    },

    methods: {
        onClickUp() {
            // 打开选择图片
            let _this = this;

            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    // console.log("选择图片成功", res);
                    let localId = res.localIds[0];
                    // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    //  调用上传图片接口
                    wx.uploadImage({
                        localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function(res) {
                            var mediaId = res.serverId; // 返回图片的服务器端ID
                              _this.headUrl =mediaId;
                            _this.$http
                                .post(
                                    "http://122.152.216.183:8092/students/" +
                                        _this.userId +
                                        "/avatar",
                                    {
                                        codedMediaId: mediaId
                                    },
                                    {
                                        emulateJSON: true
                                    }
                                )
                                .then(function(res) {
                                    _this.headUrl = res.data.url;
                                    let userId = _this.userId;
                                    getUserInfo_Axios(userId).then(response => {
                                        _this.headUrl =
                                            response.data.data.avatar;
                                    });
                                });
                        }
                    });
                    // weixin://resourceid/a/a71a51ee36849f9065d3ae024c502e10
                },
                fail: function(res) {
                    console.log("微信选择失败");
                }
            });
        },

        getStudentInfo() {
            let userId = this.userId;
            getUserInfo_Axios(userId).then(response => {
                this.nickName = response.data.data.nickName;    
                this.headUrl = response.data.data.avatar;
                if (response.data.data.grade != 100) {
                    var gradeA = this.gradeList[0][
                        parseInt(response.data.data.grade) - 7
                    ];
                    console.log("gradeA", gradeA);
                    this.value1_1.splice(0, 1);
                    this.value1_1.push(gradeA);
                }
                this.gender = response.data.data.gender;
            });
        },
        // //更改年级
        gradeChange(val) {
            this.gradeList[0].forEach((element, index) => {
                if (val[0] == element) {
                    this.gradeNum = index + 7;
                }
            });
            let data = {
                grade: this.gradeNum.toString()
            };
            let userId = this.userId;
            putGrade_Axios(userId, data).then(response => {
                if (response.data.status == 0) {
                    this.showPositionValue = true;
                }
            });
        },
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => (this.isRouterAlive = true));
        },
        sex() {
            this.showToast = true;
        },
        doShowToast(gender) {
            let data = {
                gender: gender.toString()
            };
            let userId = this.userId;
            putGender_Axios(userId, data).then(response => {
                this.$vux.toast.show({
                    text: "性别修改成功",
                    width: "15rem",
                    time: 600
                });
                this.showToast = false;
                this.gender = gender;
            });
        }
    }
};
</script>

<style lang="scss">
.Info {
    .Infohead {
        width: 53px;
        height: 53px;
        float: right;
        border-radius: 26.5px;
    }
    .uploadHead {
        position: absolute;
        right: 0;
        width: 8rem;
    }
} // elem  图片上传
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    opacity: 0;
    width: 8rem;
    height: 53px;
    z-index: 100;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}

.avatar {
    width: 11px;
    height: 45px;
    display: none;
}

.sexTitle {
    font-size: 2rem;
}
</style>
